<template>
    <div class="contain-box">
        <div class="box-header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>客户管理</el-breadcrumb-item>
                <el-breadcrumb-item>客户行业</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="box-set">
            <el-input v-model="pageObj.name" placeholder="行业名称" style="width: 220px;margin-right: 10px"
                      size="small"></el-input>
            <!--			<el-date-picker-->
            <!--					size="small"-->
            <!--					type="daterange"-->
            <!--					style="margin-right: 10px"-->
            <!--					range-separator="至"-->
            <!--					start-placeholder="创建日期"-->
            <!--					end-placeholder="创建日期">-->
            <!--			</el-date-picker>-->
            <el-button type="primary" style="background-color: #1abc9c" size="mini" @click="findPage">查 询</el-button>
            <el-button size="mini" @click="reset">重 置</el-button>
        </div>
        <div class="box-title">
            查询结果 : 共计 <span style="color: #1abc9c">{{total}}</span> 条数据
        </div>
        <div class="box-form">
            <div class="form-header">
                <el-button type="primary" style="background-color: #1abc9c" size="small" @click="dustryDialog = true">
                    新增行业
                </el-button>
                <!--				<el-button  size="small" >导 出</el-button>-->
                <!--				<el-button  size="small" >打 印</el-button>-->
            </div>
            <div class="form-table">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            align="center"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="name"
                            label="行业名称"
                            align="center"
                    >
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-button @click="showEdit(scope.row)" size="small" type="text" style="color: #1abc9c">编
                                辑
                            </el-button>
                            <el-button @click="deleteById(scope.$index)" size="small" type="text"
                                       style="color: #1abc9c">删 除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <div class="form-page">
                <el-pagination
                        background
                        @current-change="handleSelectionChange"
                        :current-page="pageObj.pageIndex"
                        :page-size="pageObj.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog
                title="新增行业"
                :visible.sync="dustryDialog"
                width="30%"
        >
            <div class="dialog-box">
                <el-input v-model="dustryName" placeholder="请输入行业名称" size="small" style="width: 60%"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
					<el-button @click="dustryDialog = false" size="small">取 消</el-button>
					<el-button type="primary" @click="submitAdd" size="small"
                               style="background-color: #1abc9c">确 定</el-button>
				  </span>
        </el-dialog>

        <el-dialog
                title="编辑行业"
                :visible.sync="dustryDialog2"
                width="30%"
        >
            <div class="dialog-box">
                <el-input v-model="editObj.name" placeholder="请输入行业名称" size="small" style="width: 60%"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
					<el-button @click="dustryDialog2 = false" size="small">取 消</el-button>
					<el-button type="primary" @click="submitEdit" size="small"
                               style="background-color: #1abc9c">确 定</el-button>
				  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                total: 0,
                pageObj: {
                    pageIndex: 1,
                    pageSize: 5,
                    name: null
                },
                dustryDialog: false,
                dustryDialog2: false,
                editObj: {},
                tableData: [],
                dustryName: null
            }
        },
        created() {
            this.findPage();
        },
        methods: {
            submitEdit() {
                if (!this.editObj.name) {
                    return this.$message.warning('请输入行业名称')
                }
                this.axios.post('/customerIndustry/edit?id=' + this.editObj.id + "&name=" + this.editObj.name).then(res => {
                    if (res.data.code === 200) {
                        this.dustryDialog2 = false
                        this.findPage()
                        this.$message.success('编辑成功')
                    }
                })
            },
            showEdit(obj) {
                this.editObj = obj
                this.dustryDialog2 = true
            },
            deleteById(index) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(index, 1)
                    this.$message.success('删除成功')
                })
            },
            submitAdd() {
                if (!this.dustryName) {
                    return this.$message.warning('请输入行业名称')
                }
                this.axios.post('/customerIndustry/save?name=' + this.dustryName).then(res => {
                    if (res.data.code === 200) {
                        this.dustryDialog = false
                        this.findPage()
                        this.$message.success('新增成功')
                    }
                })
            },
            reset() {
                this.pageObj.name = null
                this.findPage()
            },
            findPage() {
                this.axios.post('/customerIndustry/findPage', this.pageObj).then(res => {
                    if (res.data.code === 200) {
                        this.tableData = res.data.data.data
                        this.total = res.data.data.total
                    }
                })
            },
            handleSelectionChange(currentPage) {
                this.pageObj.pageIndex = currentPage;
                this.findPage();
            },
        }
    }
</script>

<style scoped lang="less">
    .contain-box {
        width: 100%;
        height: 100%;

        .dialog-box {
            width: 100%;
        }

        /deep/ .el-dialog__body {
            padding: 10px 20px;
        }

        .box-header {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .box-set {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .box-title {
            width: 100%;
            margin: 20px 0;
            padding: 10px 20px;
            border-radius: 5px;
            box-sizing: border-box;
            background-color: rgba(26, 188, 156, 0.2);
            color: #666;
            font-size: 14px;
        }

        .box-form {
            width: 100%;
            height: calc(100% - 150px);

            .form-header {
                width: 100%;
            }

            .form-table {
                margin-top: 20px;
                width: 100%;
            }

            .form-page {
                margin-top: 50px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                /deep/ .el-pager .active {
                    background-color: #1abc9c;
                }
            }
        }
    }
</style>
